<template>
  <div class="row">
    <p v-if="showText" style="text-align: center;font-size: 30px;color: green">请输入要查询的用户</p>
    <p v-else-if="showLoading" style="text-align: center;font-size: 30px;color: green">loading...</p>
    <p v-else-if="showNoBody" style="text-align: center;font-size: 30px;color: green">查无此人</p>
    <div v-else class="card" v-for="user in users" :key="user.id">
      <a :href="user.rep" target="_blank">
        <img :src="user.avatar" style='width: 100px'/>
      </a>
      <p class="card-text">{{user.name}}</p>
    </div>
  </div>
</template>

<script>
    import {mapUser} from "../util/util"
    export default {
        name: "v-list",
        data(){
          return {
            users:[], //用户列表
            showText:true,//是否显示输入提示文案  优先级最高
            showLoading:true,//是否显示输入提示文案 优先级其次
            showNoBody:true//是否显示输入提示文案   优先级最低
          }
        },
        methods:{
          rest(){
            this.showText = true;
            this.showLoading = true;
            this.showNoBody = true;
          },
          beforeReq(){
            this.showText = false;
            this.showLoading = true;
            this.showNoBody = true;
          },
          reqSuccessNoBody(){
            this.showText = false;
            this.showLoading = false;
            this.showNoBody = true;
          },
          reqSuccessHasBody(){
            this.showText = false;
            this.showLoading = false;
            this.showNoBody = false;
          }
        },
        mounted(){
          //注冊事件
          this.$bus.$on("getusername",async (username)=>{
            //将所有控制界面的数据状态重置
            this.rest()
            //显示loading图标
            this.beforeReq()

            //拿到username发送请求 获取用户的详细信息
            let {items} =  await this.$http.get("/search/users",{
              params:{
                q:username
              }
            })


            //请求完成
            if(items.length === 0){
              //显示查无此人
              this.reqSuccessNoBody()
            }else{
              //显示用户列表
              this.reqSuccessHasBody()
            }

            //界面上显示用户列表
            this.users = mapUser(items)
          })

        }
    }
</script>

<style scoped>

</style>
